import { Component } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import { AtButton, AtActivityIndicator, AtIcon } from 'taro-ui'
import { observer, inject } from 'mobx-react'
import Taro from '@tarojs/taro'
import './index.less'

const PAGE_SIZE = 10;

@inject('store')
@observer
export default class Index extends Component {
  state = {
    loading: false,
    hasMore: true,
    page: 1,
    datasource: [],
    total: -1
  }

  taroCropper = null;
  
  componentWillMount () { }

  componentDidMount () {
    this.getPageData({ page: 1 });
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onScrollToUpper = (e) => {
    console.log(e, "onScrollToUpper")
  }

  onScrollToLower = (e) => {
    console.log(e, "onScrollToLower")
    if (!this.state.hasMore) {
      return;
    }
    this.getPageData({
      page: this.state.page + 1
    })
  }

  getPageData = async ({ page }) => {
    if (this.state.loading) {
      return;
    }
    this.setState({
      loading: true,
    })

    const { id } = this.props.store.userInfo

    const { success, data } = await Taro.request({
      method: 'post',
      url: '/api/account/recent/visit/list',
      data: {
        page,
        pageSize: PAGE_SIZE,
        accountId: 1
      }
    })
    if (success) {
      const { records, total, pages, current } = data;

      this.setState({
        hasMore: current !== pages,
        page: current,
        total,
        datasource: page === 1 ? records : [...this.state.datasource, ...records],
      })
    }

    this.setState({
      loading: false,
    })
  }

  linkToAccountDetail = (item) => {
    Taro.navigateTo({
      url: `/pages/accountDetail/index?id=${item.id}`,
    })
  }

  render () {
    const { loading, total, datasource } = this.state;

    return (
      <ScrollView
        className='see-me-page'
        scrollY
        scrollWithAnimation
        scrollTop={0}
        lowerThreshold={30}
        upperThreshold={30}
        onScrollToUpper={this.onScrollToUpper}
        onScrollToLower={this.onScrollToLower}
      >
        {total == 0 && (
          <View className='empty'>
            <Image
              src='../../resource/home-empty.png'
              mode="aspectFill"
              className='empty-img'
            />

            <View className='empty-text'>暂无数据</View>
          </View>
        )}
        {total > 0 && (
          <View>
            <View className='card-list'>
              {datasource.map((item, index) => {
                const {
                  id,
                  avatar,
                  nickName,
                  occupation,
                  education,
                  birthday,
                  height,
                  homeProvince,
                  homeCity,
                  workAreaCity,
                  createTime
                } = item
                const year = birthday.slice(0, 4)
                return (
                  <View className='card-list-item' key={id} onClick={() => {
                    this.linkToAccountDetail(item)
                  }}>
                    <Image
                      className={'card-list-item-avatar'}
                      mode="aspectFill"
                      src={avatar}
                    />
                    <View className='card-list-item-content'>
                      <View className='nickname'>{nickName}</View>
                      <View className='detail'>{year} · {height}cm · {education} · {occupation}</View>
                      <View className='address'>最近访问： {createTime}</View>
                    </View>
                    <View className='card-list-item-icon'>
                      <AtIcon value='chevron-right' size='24' color='#ccc'></AtIcon>
                    </View>
                  </View>
                )
              })}
            </View>
            {loading &&
              <AtActivityIndicator content='加载中...'></AtActivityIndicator>
            }
          </View>
        )}
      </ScrollView>
    )
  }
}